ul,li{
    list-style: none;
}

.city_body {
    margin-top: 365px;
    display   : flex;
    width     : 100%;
    position  : absolute;
    top       : 0;
    bottom    : 0;
}

.city_body .city_list {
    flex      : 1;
    overflow  : auto;
    background: #f3f3f3;
}

.city_body .city_list{
    background-color: transparent;
    width           : 0;
}

.city_body .city_hot {
    margin-top: 20px;
}

.city_body .city_hot h2 {
    padding-left: 15px;
    line-height : 30px;
    font-size   : 22px;
    background  : #f3f3f3;
    font-weight : normal;
}

.city_body .city_hot ul li {
    float        : left;
    background   : #f3f3f3;
    width        : 29%;
    height       : 33px;
    margin-top   : 15px;
    margin-left  : 3%;
    padding      : 0 4px;
    border       : 1px solid #e6e6e6;
    border-radius: 3px;
    line-height  : 33px;
    text-align   : center;
    box-sizing   : border-box;
}

.city_body .city_sort div {
    margin-top: 170px;
}

.city_body .city_sort h2 {
    padding-left: 15px;
    line-height : 70px;
    font-size   : 28px;
    background  : #F0F0F0;
    font-weight : normal;
}

.city_body .city_sort ul {
    padding-left: 10px;
    margin-top  : 10px;
}

.city_body .city_sort ul li {
    line-height: 50px;
    border     : 1px solid #f3f3f3
}

.city_body .city_index {
    width          : 30px;
    display        : flex;
    flex-direction : column;
    justify-content: center;
    text-align     : center;
    border-left    : 1px #e6e6e6 solid;
}